<template>
    <div class="index">
        <div id="top-card">
            <van-image width="100%" :src="background"/>
        </div>
        <div id="center">
            <van-grid id="vant-grid" clickable :column-num="4" :border="false">
                <van-grid-item v-for="(item,index) in menus" :key="index" :icon="item.icon"
                               :text="item.name" @click="onClickInto(item.path)"/>
            </van-grid>
        </div>
    </div>

</template>

<script>
    import {Toast} from 'vant';
    export default {
        name: "index",
        data(){
            return{
                background: '/img/menu/topbg.png',//顶部背景图
                menus: [],
                token: '',
                username:'',
            }
        },
        mounted() {
            this.username = this.$store.state.home.username;
            this.init();
        },
        methods:{
            init(){
                let staffhome = { "name": "九章头条",  "path": "/jiuZhang",  "icon": "/img/menu/staffhome.png",  "sort": 1, "delFlag": "0"};
                let recharge = { "name": "中国联通",  "path": "/chinaUnicom",  "icon": "/img/menu/recharge.png",  "sort": 2, "delFlag": "0"};
                let traffic = { "name": "番茄看看",  "path": "",  "icon": "/img/menu/traffic.png",  "sort": 3, "delFlag": "0"};
                let dishes = { "name": "电视家", "path": "",  "icon": "/img/menu/dishes.png", "sort": 4, "delFlag": "0"};
                let parking = { "name": "腾讯自选股",  "path": "",  "icon": "/img/menu/parking.png", "sort": 5, "delFlag": "0"};
                let guarantee = { "name": "聚看点",  "path": "",  "icon": "/img/menu/guarantee.png", "sort": 6, "delFlag": "0"};
                let feedback = { "name": "全民悦动",  "path": "", "icon": "/img/menu/feedback.png", "sort": 7,"delFlag": "0"};
                this.menus.push(staffhome, recharge, traffic, dishes, parking, guarantee, feedback);
            },

            onClickInto(param) {
                if (param != '') {
                    this.$router.push({path: param});
                } else {
                    Toast('功能正在开发中');
                }
            },
        }
    }
</script>

<style scoped>


    /*菜单样式 屏幕宽度小于768|默认768为移动端*/
    @media only screen and (max-width: 768px) {
        #center {
            background: #FFFFFF;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            position: relative;
            margin-top: -20px;
            bottom: 0;
        }
    }

     #vant-grid {
        padding-top: 15px;
    }

    /*设置图标大小*/
     .van-icon__image {
        width: 2em;
        height: 2em;
        object-fit: contain;
    }

     body {
        background-color: #FFFFFF;
    }

</style>
